<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3的 createApp() 和 mount()</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '收购腾讯'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    app.mount("#app")
    /*
      //createApp()方法: 创建一个应用(create创建 Application应用) 前面的vue就是vue这个框架
                       ： 使用Vue.createApp()意思就是创建一个Vue的应用 
                       ： 接收一个对象形式的参数{} 即这个对象告诉VUe应该如何展示 我们最外层的组件       

        mount()方法    ： 挂载到某个html的dom节点上 接收一个字符串参数 参数可使用css选择器 一般都是id选择器 
                       ： 指定挂载的dom元素
                       
        获取根组件 
                       ：使用mount()方法时 就会返回根组件 代码如下 声明一个变量来获取根组件打印出来 
                         打印出来 看到根组件是一个Proxy形式的对象 
                         const vm = app.mount("#app")
                         console.log(vm)
                         获取vm根节点后 就可以操作里面的数据了 代码如下 
                         vm.$data.message = "常东东收购的 "
                         
        mvvm设计模式？
                        m--代表model数据 
                        v--代表view视图 
                       vm--代表ciewMOdel视图数据连接层 
                                         

                       








        */

</script>
</html>